<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            background: #222;
        }
        .container {
            margin: 200px auto;
            width: 768px;
            -webkit-transform: scale(0.6);
            -ms-transform: scale(0.6);
            transform: scale(0.6);
        }
        .sun {
            background: -webkit-linear-gradient(0deg, #c9c45e, #e9c45e);
            background: linear-gradient(90deg, #c9c45e, #e9c45e);
            width: 60px;
            height: 60px;
            border-radius: 100%;
            margin: 105px auto;
            position: absolute;
            left: 0;
            right: 0;
        }
        .mercury {
            background: #453217;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 10px;
        }
        .venus {
            background: #ac6339;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 30px;
        }
        .earth {
            background: #3e8ebb;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 70px;
        }
        .mars {
            background: #6f3125;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 110px;
        }
        .jupiter {
            background: #3d2c14;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 160px;
        }
        .saturn {
            background: #e97340;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 200px;
        }
        .uranus {
            background: #379;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 250px;
        }
        .neptune {
            background: #6acdc0;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 290px;
        }
        .pluto {
            background: #c6c053;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            margin-top: 340px;
        }
        [class*="-orbit"] {
            position: absolute;
            left: 0;
            right: 0;
            border: 1px solid #333;
            box-shadow: 0px 1px 1px #4096ee;
            border-radius: 100%;
        }
        .mercurys-orbit {
            width: 100px;
            height: 100px;
            margin: 85px auto;
            -webkit-animation: gravity 0.60057s linear infinite;
            animation: gravity 0.60057s linear infinite;
        }
        .venus-orbit {
            width: 170px;
            height: 170px;
            margin: 50px auto;
            -webkit-animation: gravity 3.3365s linear infinite;
            animation: gravity 3.3365s linear infinite;
        }
        .earths-orbit {
            width: 270px;
            height: 270px;
            margin: 0px auto;
            -webkit-animation: gravity 6.673s linear infinite;
            animation: gravity 6.673s linear infinite;
        }
        .mars-orbit {
            width: 370px;
            height: 370px;
            margin: -50px auto;
            -webkit-animation: gravity 10.0095s linear infinite;
            animation: gravity 10.0095s linear infinite;
        }
        .jupiters-orbit {
            width: 470px;
            height: 470px;
            margin: -100px auto;
            -webkit-animation: gravity 13.346s linear infinite;
            animation: gravity 13.346s linear infinite;
        }
        .saturns-orbit {
            width: 570px;
            height: 570px;
            margin: -150px auto;
            -webkit-animation: gravity 20.019s linear infinite;
            animation: gravity 20.019s linear infinite;
        }
        .uranus-orbit {
            width: 670px;
            height: 670px;
            margin: -200px auto;
            -webkit-animation: gravity 26.692s linear infinite;
            animation: gravity 26.692s linear infinite;
        }
        .neptunes-orbit {
            width: 770px;
            height: 770px;
            margin: -250px auto;
            -webkit-animation: gravity 33.365s linear infinite;
            animation: gravity 33.365s linear infinite;
        }
        .plutos-orbit {
            width: 870px;
            height: 870px;
            margin: -300px auto;
            margin-left: -50px;
            -webkit-animation: gravity 40.038s linear infinite;
            animation: gravity 40.038s linear infinite;
        }
        @-webkit-keyframes gravity {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes gravity {
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<div class="container">

    <div class="sun"></div>

    <div class="mercurys-orbit">

        <div class="mercury"></div>

    </div>

    <div class="venus-orbit">

        <div class="venus"></div>

    </div>

    <div class="earths-orbit">

        <div class="earth"></div>

    </div>

    <div class="mars-orbit">

        <div class="mars"></div>

    </div>

    <div class="jupiters-orbit">

        <div class="jupiter"></div>

    </div>

    <div class="saturns-orbit">

        <div class="saturn"></div>

    </div>

    <div class="uranus-orbit">

        <div class="uranus"></div>

    </div>

    <div class="neptunes-orbit">

        <div class="neptune"></div>

    </div>

    <div class="plutos-orbit">

        <div class="pluto"></div>

    </div>

</div>
</body>
</html>